<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-table :data="dataList" border style="width: 100%">
          <el-table-column prop="id" fixed label="序号" width="50"></el-table-column>
          <el-table-column prop="name" label="企业名称" width="150"></el-table-column>
          <el-table-column prop="version" label="当前版本" width="150"></el-table-column>
          <el-table-column prop="legalRepresentative" label="联系人" width="150"></el-table-column>
          <el-table-column prop="companyPhone" label="联系电话" width="150"></el-table-column>
          <el-table-column prop="companyAddress" label="所在地区" width="150"></el-table-column>
          <el-table-column prop="createTime" label="申请时间" width="150"></el-table-column>
          <el-table-column prop="updateTime" label="结束时间" width="150"></el-table-column>
          <el-table-column prop="state" label="状态" width="150">
            <!-- 传递当前行的所有数据 -->
            <template slot-scope="scope">
              <!--
              inactive-value：未激活的数据值
              inactive-color：未激活的数据值
              active-color：激活的颜色
              active-value：激活的数据值
              -->
              <el-switch v-model="scope.row.state"
                         inactive-value="0" active-value="1"
                         disabled
                         active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <!--              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
              <el-button type="text" size="small">
                <router-link :to="'/saas-clients/details/'+scope.row.id">编辑</router-link>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="params.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.limit"
          layout="->,total,sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>
<script>
import {page} from '@/api/base/saasClient'

export default {
  data() {
    return {
      dataList: [],
      params: {
        page: 1,
        limit: 10,
      },
      total: 0
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.params.page = val;
      this.fetchData();
    },
    handleSizeChange(val) {
      this.params.limit = val;
      this.fetchData();
    },
    fetchData() {
      // 发送请求到后端
      page(this.params)
        .then((res) => {
          // 处理后端返回的数据
          this.total = Number(res.data.data.total);
          // 更新数据显示
          this.dataList = res.data.data.list
        });
    },
  },
  created() {
    this.fetchData()
  },

}</script>
